<template>
  <div class="lottie-demo">
    <h2 class="section-title">Lottie 动画详解</h2>
    <p class="section-intro">
      Lottie 是一个由 Airbnb 开源的动画库，可以将 After Effects 动画导出为 JSON 格式，在
      Web、iOS、Android 等平台上播放。
    </p>

    <div class="demo-grid">
      <!-- Lottie 简介 -->
      <div class="demo-card">
        <h3>什么是 Lottie</h3>
        <div class="code-example">
          <div class="code-block">
            <pre><code>// Lottie 的优势
1. 矢量动画，无损缩放
2. 文件体积小，性能好
3. 跨平台支持
4. 设计师友好的工作流
5. 支持交互控制

// 安装 Lottie
npm install lottie-web
# 或
npm install vue-lottie

// 基本使用
import lottie from 'lottie-web'

const animation = lottie.loadAnimation({
  container: element, // DOM 元素
  renderer: 'svg',    // 渲染器：svg/canvas/html
  loop: true,         // 是否循环
  autoplay: true,     // 自动播放
  animationData: data // JSON 动画数据
})</code></pre>
          </div>
          <div class="demo-result">
            <div class="lottie-intro">
              <div class="intro-content">
                <h4>Lottie 工作流程</h4>
                <div class="workflow-steps">
                  <div class="step">
                    <div class="step-number">1</div>
                    <div class="step-content">
                      <h5>After Effects 制作</h5>
                      <p>设计师使用 AE 创建动画</p>
                    </div>
                  </div>
                  <div class="step-arrow">→</div>
                  <div class="step">
                    <div class="step-number">2</div>
                    <div class="step-content">
                      <h5>Bodymovin 导出</h5>
                      <p>使用插件导出 JSON 文件</p>
                    </div>
                  </div>
                  <div class="step-arrow">→</div>
                  <div class="step">
                    <div class="step-number">3</div>
                    <div class="step-content">
                      <h5>Web 端播放</h5>
                      <p>使用 Lottie 库播放动画</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 基础实现 -->
      <div class="demo-card">
        <h3>基础实现方式</h3>
        <div class="code-example">
          <div class="code-block">
            <pre><code>// 方式一：原生 lottie-web
import lottie from 'lottie-web'
import { onMounted, ref } from 'vue'

export default {
  setup() {
    const lottieContainer = ref(null)
    let animation = null

    onMounted(() => {
      animation = lottie.loadAnimation({
        container: lottieContainer.value,
        renderer: 'svg',
        loop: true,
        autoplay: true,
        path: '/animations/loading.json' // 或使用 animationData
      })
    })

    return { lottieContainer }
  }
}

// 方式二：Vue 组件封装
&lt;template&gt;
  &lt;div ref="lottieContainer" :style="{ width, height }"&gt;&lt;/div&gt;
&lt;/template&gt;

&lt;script setup&gt;
import { ref, onMounted, onUnmounted, watch } from 'vue'
import lottie from 'lottie-web'

const props = defineProps({
  animationData: Object,
  path: String,
  loop: { type: Boolean, default: true },
  autoplay: { type: Boolean, default: true },
  width: { type: String, default: '100px' },
  height: { type: String, default: '100px' }
})

const lottieContainer = ref(null)
let animation = null

onMounted(() => {
  loadAnimation()
})

const loadAnimation = () => {
  if (animation) {
    animation.destroy()
  }

  animation = lottie.loadAnimation({
    container: lottieContainer.value,
    renderer: 'svg',
    loop: props.loop,
    autoplay: props.autoplay,
    animationData: props.animationData,
    path: props.path
  })
}
&lt;/script&gt;</code></pre>
          </div>
          <div class="demo-result">
            <div class="basic-implementation">
              <h4>模拟 Lottie 动画效果</h4>
              <div class="mock-animations">
                <div class="mock-lottie loading-animation">
                  <div class="loading-spinner"></div>
                  <p>加载动画</p>
                </div>
                <div class="mock-lottie success-animation">
                  <div class="success-check">✓</div>
                  <p>成功动画</p>
                </div>
                <div class="mock-lottie heart-animation">
                  <div class="heart">❤️</div>
                  <p>心跳动画</p>
                </div>
              </div>
              <div class="animation-note">
                <p>
                  <strong>注意：</strong>这里使用 CSS 动画模拟 Lottie 效果，实际项目中需要真实的
                  Lottie JSON 文件。
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 动画控制 -->
      <div class="demo-card">
        <h3>动画控制方法</h3>
        <div class="code-example">
          <div class="code-block">
            <pre><code>// 播放控制
animation.play()        // 播放
animation.pause()       // 暂停
animation.stop()        // 停止
animation.goToAndStop(frame, isFrame) // 跳转到指定帧并停止
animation.goToAndPlay(frame, isFrame) // 跳转到指定帧并播放

// 速度控制
animation.setSpeed(speed)  // 设置播放速度
animation.setDirection(direction) // 设置播放方向 1 或 -1

// 循环控制
animation.loop = false     // 设置是否循环
animation.autoplay = false // 设置是否自动播放

// 事件监听
animation.addEventListener('complete', () => {
  console.log('动画播放完成')
})

animation.addEventListener('loopComplete', () => {
  console.log('动画循环完成')
})

animation.addEventListener('enterFrame', () => {
  console.log('进入新帧')
})

// 获取动画信息
animation.totalFrames    // 总帧数
animation.currentFrame   // 当前帧
animation.playSpeed      // 播放速度
animation.playDirection  // 播放方向

// 销毁动画
animation.destroy()</code></pre>
          </div>
          <div class="demo-result">
            <div class="animation-controls">
              <div class="control-panel">
                <h4>动画控制面板</h4>
                <div class="controls-grid">
                  <div class="control-group">
                    <label>播放控制:</label>
                    <div class="button-group">
                      <button @click="playAnimation" :disabled="!canControl">播放</button>
                      <button @click="pauseAnimation" :disabled="!canControl">暂停</button>
                      <button @click="stopAnimation" :disabled="!canControl">停止</button>
                    </div>
                  </div>

                  <div class="control-group">
                    <label>速度控制:</label>
                    <div class="speed-control">
                      <input
                        type="range"
                        v-model="animationSpeed"
                        min="0.1"
                        max="3"
                        step="0.1"
                        @input="setSpeed"
                      />
                      <span>{{ animationSpeed }}x</span>
                    </div>
                  </div>

                  <div class="control-group">
                    <label>方向控制:</label>
                    <div class="direction-control">
                      <button @click="setDirection(1)" :class="{ active: direction === 1 }">
                        正向
                      </button>
                      <button @click="setDirection(-1)" :class="{ active: direction === -1 }">
                        反向
                      </button>
                    </div>
                  </div>

                  <div class="control-group">
                    <label>循环控制:</label>
                    <label class="checkbox-label">
                      <input type="checkbox" v-model="isLoop" @change="setLoop" />
                      循环播放
                    </label>
                  </div>
                </div>
              </div>

              <div class="mock-player">
                <div class="player-container" :class="{ playing: isPlaying, paused: isPaused }">
                  <div class="player-animation" :style="animationStyles">
                    <div class="animated-element"></div>
                  </div>
                  <div class="player-info">
                    <div class="info-item">状态: {{ animationStatus }}</div>
                    <div class="info-item">速度: {{ animationSpeed }}x</div>
                    <div class="info-item">方向: {{ direction === 1 ? '正向' : '反向' }}</div>
                    <div class="info-item">循环: {{ isLoop ? '开启' : '关闭' }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 实际应用场景 -->
      <div class="demo-card">
        <h3>实际应用场景</h3>
        <div class="code-example">
          <div class="code-block">
            <pre><code>// 1. 加载状态动画
const LoadingComponent = {
  template: `
    &lt;div class="loading-container"&gt;
      &lt;div ref="loadingAnimation"&gt;&lt;/div&gt;
      &lt;p&gt;{{ message }}&lt;/p&gt;
    &lt;/div&gt;
  `,
  setup() {
    const loadingAnimation = ref(null)
    
    onMounted(() => {
      lottie.loadAnimation({
        container: loadingAnimation.value,
        path: '/animations/loading.json',
        loop: true,
        autoplay: true
      })
    })
    
    return { loadingAnimation }
  }
}

// 2. 成功/失败反馈
const showSuccess = () => {
  const animation = lottie.loadAnimation({
    container: document.getElementById('feedback'),
    path: '/animations/success.json',
    loop: false,
    autoplay: true
  })
  
  animation.addEventListener('complete', () => {
    setTimeout(() => animation.destroy(), 1000)
  })
}

// 3. 交互式动画
const InteractiveButton = {
  setup() {
    let hoverAnimation = null
    
    const onMouseEnter = () => {
      hoverAnimation = lottie.loadAnimation({
        container: buttonRef.value,
        path: '/animations/button-hover.json',
        loop: false,
        autoplay: true
      })
    }
    
    const onMouseLeave = () => {
      if (hoverAnimation) {
        hoverAnimation.setDirection(-1)
        hoverAnimation.play()
      }
    }
    
    return { onMouseEnter, onMouseLeave }
  }
}

// 4. 滚动触发动画
const ScrollAnimation = {
  setup() {
    const animationRef = ref(null)
    let scrollAnimation = null
    
    onMounted(() => {
      scrollAnimation = lottie.loadAnimation({
        container: animationRef.value,
        path: '/animations/scroll-reveal.json',
        loop: false,
        autoplay: false
      })
      
      // 监听滚动
      const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            scrollAnimation.play()
          }
        })
      })
      
      observer.observe(animationRef.value)
    })
    
    return { animationRef }
  }
}</code></pre>
          </div>
          <div class="demo-result">
            <div class="application-scenarios">
              <div class="scenario-grid">
                <div class="scenario-item">
                  <h4>🔄 加载状态</h4>
                  <div class="scenario-demo loading-demo">
                    <div class="mock-loading">
                      <div class="loading-dots">
                        <span></span>
                        <span></span>
                        <span></span>
                      </div>
                    </div>
                    <p>数据加载中...</p>
                  </div>
                </div>

                <div class="scenario-item">
                  <h4>✅ 状态反馈</h4>
                  <div class="scenario-demo feedback-demo">
                    <button @click="showFeedback" class="feedback-btn">
                      {{ feedbackShown ? '重置' : '显示反馈' }}
                    </button>
                    <div class="feedback-animation" :class="{ show: feedbackShown }">
                      <div class="success-icon">✓</div>
                    </div>
                  </div>
                </div>

                <div class="scenario-item">
                  <h4>🎯 交互动画</h4>
                  <div class="scenario-demo interactive-demo">
                    <button
                      class="interactive-btn"
                      @mouseenter="startHover"
                      @mouseleave="endHover"
                      :class="{ hovering: isHovering }"
                    >
                      悬停我
                    </button>
                  </div>
                </div>

                <div class="scenario-item">
                  <h4>📜 滚动动画</h4>
                  <div class="scenario-demo scroll-demo">
                    <div
                      class="scroll-trigger"
                      :class="{ visible: scrollVisible }"
                      ref="scrollElement"
                    >
                      <div class="scroll-animation">🚀</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 性能优化 -->
      <div class="demo-card">
        <h3>性能优化建议</h3>
        <div class="code-example">
          <div class="code-block">
            <pre><code>// 1. 选择合适的渲染器
// SVG: 适合简单动画，支持交互
// Canvas: 适合复杂动画，性能更好
// HTML: 适合 DOM 操作，但性能较差

const animation = lottie.loadAnimation({
  container: element,
  renderer: 'canvas', // 复杂动画推荐使用 canvas
  loop: true,
  autoplay: true,
  animationData: data
})

// 2. 预加载动画数据
const preloadAnimations = async () => {
  const animations = [
    '/animations/loading.json',
    '/animations/success.json',
    '/animations/error.json'
  ]
  
  const promises = animations.map(url => 
    fetch(url).then(res => res.json())
  )
  
  const animationData = await Promise.all(promises)
  return animationData
}

// 3. 动画池管理
class AnimationPool {
  constructor() {
    this.pool = new Map()
  }
  
  getAnimation(key, config) {
    if (this.pool.has(key)) {
      return this.pool.get(key)
    }
    
    const animation = lottie.loadAnimation(config)
    this.pool.set(key, animation)
    return animation
  }
  
  destroyAnimation(key) {
    if (this.pool.has(key)) {
      this.pool.get(key).destroy()
      this.pool.delete(key)
    }
  }
  
  clear() {
    this.pool.forEach(animation => animation.destroy())
    this.pool.clear()
  }
}

// 4. 懒加载动画
const LazyLottie = {
  setup() {
    const isVisible = ref(false)
    const animationRef = ref(null)
    
    onMounted(() => {
      const observer = new IntersectionObserver((entries) => {
        if (entries[0].isIntersecting) {
          isVisible.value = true
          loadAnimation()
          observer.disconnect()
        }
      })
      
      observer.observe(animationRef.value)
    })
    
    const loadAnimation = () => {
      lottie.loadAnimation({
        container: animationRef.value,
        path: '/animations/lazy-load.json',
        loop: true,
        autoplay: true
      })
    }
    
    return { animationRef, isVisible }
  }
}

// 5. 内存管理
onUnmounted(() => {
  // 组件销毁时清理动画
  if (animation) {
    animation.destroy()
    animation = null
  }
})</code></pre>
          </div>
          <div class="demo-result">
            <div class="performance-tips">
              <h4>性能优化要点</h4>
              <div class="tips-list">
                <div class="tip-item">
                  <div class="tip-icon">🎨</div>
                  <div class="tip-content">
                    <h5>渲染器选择</h5>
                    <p>简单动画用 SVG，复杂动画用 Canvas</p>
                  </div>
                </div>

                <div class="tip-item">
                  <div class="tip-icon">📦</div>
                  <div class="tip-content">
                    <h5>文件优化</h5>
                    <p>压缩 JSON 文件，移除不必要的图层</p>
                  </div>
                </div>

                <div class="tip-item">
                  <div class="tip-icon">🔄</div>
                  <div class="tip-content">
                    <h5>动画复用</h5>
                    <p>使用动画池管理，避免重复加载</p>
                  </div>
                </div>

                <div class="tip-item">
                  <div class="tip-icon">👁️</div>
                  <div class="tip-content">
                    <h5>懒加载</h5>
                    <p>在需要时才加载动画，减少初始加载时间</p>
                  </div>
                </div>

                <div class="tip-item">
                  <div class="tip-icon">🧹</div>
                  <div class="tip-content">
                    <h5>内存清理</h5>
                    <p>及时销毁不需要的动画实例</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="lottie-tips">
      <h3>Lottie 最佳实践</h3>
      <div class="tips-grid">
        <div class="tip-card">
          <h4>🎨 设计阶段</h4>
          <ul>
            <li>保持动画简洁，避免过度复杂</li>
            <li>使用形状图层而非位图</li>
            <li>合理控制动画时长和帧率</li>
          </ul>
        </div>
        <div class="tip-card">
          <h4>📁 文件管理</h4>
          <ul>
            <li>压缩 JSON 文件大小</li>
            <li>移除未使用的图层和属性</li>
            <li>使用 CDN 加速文件加载</li>
          </ul>
        </div>
        <div class="tip-card">
          <h4>💻 开发实现</h4>
          <ul>
            <li>选择合适的渲染器</li>
            <li>实现动画预加载和缓存</li>
            <li>添加加载失败的降级方案</li>
          </ul>
        </div>
        <div class="tip-card">
          <h4>⚡ 性能优化</h4>
          <ul>
            <li>使用 Intersection Observer 懒加载</li>
            <li>及时销毁不需要的动画</li>
            <li>监控动画性能指标</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'

// 动画控制状态
const canControl = ref(true)
const isPlaying = ref(false)
const isPaused = ref(false)
const animationSpeed = ref(1)
const direction = ref(1)
const isLoop = ref(true)

// 应用场景状态
const feedbackShown = ref(false)
const isHovering = ref(false)
const scrollVisible = ref(false)
const scrollElement = ref<HTMLElement>()

// 计算属性
const animationStatus = ref('停止')
const animationStyles = ref({
  animationPlayState: 'paused',
  animationDuration: '2s',
  animationDirection: 'normal',
  animationIterationCount: 'infinite',
})

// 动画控制方法
const playAnimation = () => {
  isPlaying.value = true
  isPaused.value = false
  animationStatus.value = '播放中'
  animationStyles.value.animationPlayState = 'running'
}

const pauseAnimation = () => {
  isPlaying.value = false
  isPaused.value = true
  animationStatus.value = '暂停'
  animationStyles.value.animationPlayState = 'paused'
}

const stopAnimation = () => {
  isPlaying.value = false
  isPaused.value = false
  animationStatus.value = '停止'
  animationStyles.value.animationPlayState = 'paused'
}

const setSpeed = () => {
  animationStyles.value.animationDuration = `${2 / animationSpeed.value}s`
}

const setDirection = (dir: number) => {
  direction.value = dir
  animationStyles.value.animationDirection = dir === 1 ? 'normal' : 'reverse'
}

const setLoop = () => {
  animationStyles.value.animationIterationCount = isLoop.value ? 'infinite' : '1'
}

// 应用场景方法
const showFeedback = () => {
  feedbackShown.value = !feedbackShown.value
}

const startHover = () => {
  isHovering.value = true
}

const endHover = () => {
  isHovering.value = false
}

// 滚动动画
onMounted(() => {
  if (scrollElement.value) {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            scrollVisible.value = true
          }
        })
      },
      { threshold: 0.5 },
    )

    observer.observe(scrollElement.value)

    onUnmounted(() => {
      observer.disconnect()
    })
  }
})
</script>

<style scoped lang="scss">
.lottie-demo {
  .section-title {
    font-size: 2rem;
    color: #333;
    margin-bottom: 1rem;
    border-bottom: 3px solid #e91e63;
    padding-bottom: 0.5rem;
  }

  .section-intro {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 2rem;
    line-height: 1.6;
  }

  .demo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
  }

  .demo-card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 1.5rem;
    background: #fafafa;

    h3 {
      margin: 0 0 1rem 0;
      color: #e91e63;
      font-size: 1.3rem;
    }

    .code-example {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .code-block {
      background: #2d3748;
      border-radius: 6px;
      padding: 1rem;
      overflow-x: auto;

      pre {
        margin: 0;
        color: #e2e8f0;
        font-family: 'Fira Code', monospace;
        font-size: 0.9rem;
        line-height: 1.4;
      }
    }

    .demo-result {
      background: white;
      border: 1px solid #e0e0e0;
      border-radius: 6px;
      padding: 1rem;
      min-height: 100px;
    }
  }

  .lottie-tips {
    .tips-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 1rem;
    }

    .tip-card {
      background: #fce4ec;
      border-radius: 8px;
      padding: 1.5rem;
      border-left: 4px solid #e91e63;

      h4 {
        margin: 0 0 0.5rem 0;
        color: #ad1457;
        font-size: 1.1rem;
      }

      ul {
        margin: 0;
        padding-left: 1.5rem;

        li {
          margin-bottom: 0.25rem;
          color: #666;
          font-size: 0.9rem;
        }
      }
    }
  }
}

// Lottie 介绍样式
.lottie-intro {
  .intro-content {
    h4 {
      margin: 0 0 1rem 0;
      color: #333;
      text-align: center;
    }

    .workflow-steps {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 1rem;
      flex-wrap: wrap;

      .step {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        min-width: 120px;

        .step-number {
          width: 40px;
          height: 40px;
          background: #e91e63;
          color: white;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: bold;
          margin-bottom: 0.5rem;
        }

        .step-content {
          h5 {
            margin: 0 0 0.25rem 0;
            color: #333;
            font-size: 0.9rem;
          }

          p {
            margin: 0;
            color: #666;
            font-size: 0.8rem;
            line-height: 1.3;
          }
        }
      }

      .step-arrow {
        font-size: 1.5rem;
        color: #e91e63;
        font-weight: bold;
      }
    }
  }
}

// 基础实现样式
.basic-implementation {
  h4 {
    margin: 0 0 1rem 0;
    color: #333;
    text-align: center;
  }

  .mock-animations {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;

    .mock-lottie {
      text-align: center;
      padding: 1rem;
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      background: #f9f9f9;

      .loading-spinner {
        width: 40px;
        height: 40px;
        border: 4px solid #f3f3f3;
        border-top: 4px solid #e91e63;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin: 0 auto 0.5rem;
      }

      .success-check {
        width: 40px;
        height: 40px;
        background: #4caf50;
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        margin: 0 auto 0.5rem;
        animation: scale-in 0.5s ease-out;
      }

      .heart {
        font-size: 2rem;
        animation: heartbeat 1s ease-in-out infinite;
        margin-bottom: 0.5rem;
      }

      p {
        margin: 0;
        font-size: 0.9rem;
        color: #666;
      }
    }
  }

  .animation-note {
    background: #fff3e0;
    border: 1px solid #ffcc02;
    border-radius: 4px;
    padding: 1rem;
    border-left: 4px solid #ff9800;

    p {
      margin: 0;
      color: #e65100;
      font-size: 0.9rem;
    }
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes scale-in {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes heartbeat {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

// 动画控制样式
.animation-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;

  .control-panel {
    h4 {
      margin: 0 0 1rem 0;
      color: #333;
    }

    .controls-grid {
      display: flex;
      flex-direction: column;
      gap: 1rem;

      .control-group {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;

        label {
          font-weight: 500;
          font-size: 0.9rem;
        }

        .button-group {
          display: flex;
          gap: 0.5rem;

          button {
            padding: 6px 12px;
            border: 1px solid #e91e63;
            background: white;
            color: #e91e63;
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.8rem;
            transition: all 0.2s;

            &:hover:not(:disabled) {
              background: #e91e63;
              color: white;
            }

            &:disabled {
              opacity: 0.5;
              cursor: not-allowed;
            }
          }
        }

        .speed-control {
          display: flex;
          align-items: center;
          gap: 0.5rem;

          input[type='range'] {
            flex: 1;
          }

          span {
            min-width: 40px;
            font-size: 0.9rem;
            color: #666;
          }
        }

        .direction-control {
          display: flex;
          gap: 0.5rem;

          button {
            flex: 1;
            padding: 6px 12px;
            border: 1px solid #ddd;
            background: white;
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.8rem;
            transition: all 0.2s;

            &.active {
              background: #e91e63;
              color: white;
              border-color: #e91e63;
            }

            &:hover:not(.active) {
              background: #f5f5f5;
            }
          }
        }

        .checkbox-label {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          cursor: pointer;

          input[type='checkbox'] {
            margin: 0;
          }
        }
      }
    }
  }

  .mock-player {
    .player-container {
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      padding: 1rem;
      background: #f9f9f9;

      .player-animation {
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 1rem;
        background: white;
        border-radius: 4px;
        position: relative;
        overflow: hidden;

        .animated-element {
          width: 40px;
          height: 40px;
          background: #e91e63;
          border-radius: 50%;
          animation: mock-animation 2s linear infinite paused;
        }
      }

      &.playing .animated-element {
        animation-play-state: running;
      }

      .player-info {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;

        .info-item {
          font-size: 0.8rem;
          color: #666;
          padding: 0.25rem 0.5rem;
          background: white;
          border-radius: 2px;
        }
      }
    }
  }
}

@keyframes mock-animation {
  0% {
    transform: translateX(-50px) rotate(0deg);
  }
  50% {
    transform: translateX(50px) rotate(180deg);
  }
  100% {
    transform: translateX(-50px) rotate(360deg);
  }
}

// 应用场景样式
.application-scenarios {
  .scenario-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;

    .scenario-item {
      text-align: center;

      h4 {
        margin: 0 0 1rem 0;
        color: #333;
        font-size: 1rem;
      }

      .scenario-demo {
        border: 1px solid #e0e0e0;
        border-radius: 6px;
        padding: 1rem;
        background: #f9f9f9;
        min-height: 100px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;

        &.loading-demo {
          .mock-loading {
            .loading-dots {
              display: flex;
              gap: 4px;

              span {
                width: 8px;
                height: 8px;
                background: #e91e63;
                border-radius: 50%;
                animation: loading-dots 1.4s ease-in-out infinite both;

                &:nth-child(1) {
                  animation-delay: -0.32s;
                }
                &:nth-child(2) {
                  animation-delay: -0.16s;
                }
              }
            }
          }

          p {
            margin: 0.5rem 0 0 0;
            font-size: 0.9rem;
            color: #666;
          }
        }

        &.feedback-demo {
          .feedback-btn {
            padding: 8px 16px;
            background: #4caf50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.9rem;

            &:hover {
              background: #45a049;
            }
          }

          .feedback-animation {
            opacity: 0;
            transform: scale(0);
            transition: all 0.3s ease;

            &.show {
              opacity: 1;
              transform: scale(1);
            }

            .success-icon {
              width: 40px;
              height: 40px;
              background: #4caf50;
              color: white;
              border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 1.2rem;
              font-weight: bold;
            }
          }
        }

        &.interactive-demo {
          .interactive-btn {
            padding: 12px 24px;
            background: #2196f3;
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 1rem;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;

            &::before {
              content: '';
              position: absolute;
              top: 50%;
              left: 50%;
              width: 0;
              height: 0;
              background: rgba(255, 255, 255, 0.2);
              border-radius: 50%;
              transform: translate(-50%, -50%);
              transition: all 0.3s ease;
            }

            &.hovering::before {
              width: 100px;
              height: 100px;
            }

            &:hover {
              transform: translateY(-2px);
              box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
            }
          }
        }

        &.scroll-demo {
          .scroll-trigger {
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.6s ease;

            &.visible {
              opacity: 1;
              transform: translateY(0);
            }

            .scroll-animation {
              font-size: 2rem;
              animation: rocket-launch 2s ease-in-out infinite;
            }
          }
        }
      }
    }
  }
}

@keyframes loading-dots {
  0%,
  80%,
  100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

@keyframes rocket-launch {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

// 性能优化样式
.performance-tips {
  h4 {
    margin: 0 0 1rem 0;
    color: #333;
    text-align: center;
  }

  .tips-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    .tip-item {
      display: flex;
      align-items: flex-start;
      gap: 1rem;
      padding: 1rem;
      background: #f9f9f9;
      border-radius: 6px;
      border-left: 4px solid #e91e63;

      .tip-icon {
        font-size: 1.5rem;
        flex-shrink: 0;
      }

      .tip-content {
        flex: 1;

        h5 {
          margin: 0 0 0.25rem 0;
          color: #333;
          font-size: 1rem;
        }

        p {
          margin: 0;
          color: #666;
          font-size: 0.9rem;
          line-height: 1.4;
        }
      }
    }
  }
}
</style>
